const path = require('path');
//热更新 第2步 , 导入已安装的webpack
const webpack = require('webpack');

//引入插件
//作用: 1.使用插件之后，不需要手动连接 bundle.js文件
//      2.使用插件之后,自动引用内存中的html页面
const htmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = { //entry 入口  output 输出
    entry: path.join(__dirname, './src/main.js'), // 需要打包的文件 入口
    output: {
        path: path.join(__dirname, "./dist"), //打包之后 输出到文件夹
        filename: "bundel.js" //打包好之后 生成的文件名
    },
    devServer: {
        open: "chrome",
        // port: 4001,
        contentBase: "src",
        hot: true //热更新第一步
    },
    plugins: [ //配置插件的阶点
        new webpack.HotModuleReplacementPlugin(), //热更新 第2步
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//需要创建的html模板路径
            filename:'index.html' //在内存中创建的HTML页面
        }),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},// use 中加载执行的顺序 右往左执行 先执行css-loader 在执行style-loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //limit 限制,限定，用于 --指定图片的大小, [name]表示背景图片的名称 [ext]表示获取图片的后缀名, [hash]表示设置5位哈希编码
            {test:/\.(jpg|gif|png|jpeg|bmp)$/,use:'url-loader?esModule=false&limit=56672&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|svg|dot|woff|woff2|font|ttc|eot)$/,use:'url-loader'},//用于处理字体图标
            {test:/\.js/,use:'babel-loader',exclude:/node_modules/},//exclude:/node_modules/ --表示排查node_modules文件夹中.js文件
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    resolve:{
        alias:{//修改 vue导入的文件
            "vue$":"vue/dist/vue.js"
        }
    }
}
